<html>
<head>
<title id="titlename">WebSocket</title>

<style>
 html,body{font:normal 0.9em arial,helvetica;}
 #log {width:440px; height:200px; border:1px solid #7F9DB9; overflow:auto;}
 #msg {width:330px;}
</style>

<script>
var socket;
var username;
var olusers;
function init(){
  var host = "ws://localhost:9527/websocket/websocket.php";
  try{
    socket = new WebSocket(host);
    
    log('WebSocket - status '+socket.readyState);
    socket.onopen    = function(msg){ log("Welcome - status "+this.readyState); login();};
    
    socket.onmessage = function(msg){
     var clientmsg=msg.data;
      clientmsg = clientmsg.substr(0,(clientmsg.length-4));
  //   clientmsg.substring(0,clientmsg.length-4);
     clientaction(clientmsg);
   //  log("Received: "+clientmsg); 
   };
    socket.onclose   = function(msg){ log("Disconnected - status "+this.readyState); };
  }
  catch(ex){ log(ex); }
  $("msg").focus();
}
function clientaction(msg)
{
 
 // alert(msg);
  //var msg2=String(msg);
 // msg='{fromuser:\'server\',content:\'tt|bb|\',state: 1}\n';
 // msg = msg.substr(0,(msg.length-4));
 // log(msg);
 var serverinfo = JSON.parse(msg);
 // var serverinfo=eval('('+msg+')');

  //log(serverinfo['fromuser']);
 // log(serverinfo['content']);

        switch (serverinfo['state'])
        {
            case 1 : {
                       showalluser(serverinfo['content']);
                       log("Received:welcome user \""+username+"\"");
                       break;
                      }
            case 3 :{
                      log("Received: \""+serverinfo['fromuser']+"\" has logout the chat room");
                      deluser(serverinfo['fromuser']);
                      break;
                    }
            case 4 :{
                      log("Received: "+serverinfo['fromuser']+" say to you "+"\""+serverinfo['content']+"\"");
                      break;
                    }
            case 5 :{
                      log("Received:the user you are requre to send are not found");
                      break;
                    }
            case 6 :{
                      log("Received: "+serverinfo['fromuser']+" say to everbody "+"\""+serverinfo['content']+"\"");
                      break;
                    }
             case 7 :{
                      log("Received: "+serverinfo['content']);
                      if (serverinfo['fromuser']!=username)
                         {
                         //   alert("not equel");
                            olusers.push(serverinfo['fromuser']);
                         //   alert(olusers);
                            refreshuser();
                          }
                      break;
                    }

        }
  
  
}
function refreshuser()
{
  var slt=document.getElementById("senduser");
   slt.options.length=0;
  $("onlineuser").innerHTML="onlineuser user ";
   for (var i=0;i<olusers.length;i++)
  {
        addnewuser(olusers[i]);
  }
}
function addnewuser(username)
{
    var slt=document.getElementById("senduser");
    var objOption=document.createElement("OPTION");
    objOption.value=username;
    objOption.text=username;
    objOption.id=username;
    slt.add(objOption);
    var ou=$("onlineuser").innerHTML
    $("onlineuser").innerHTML=ou+' '+username;
}
function deluser(username)
{
 // alert(username)
  for(var i=0;i<olusers.length;i++)
  {
    if (username==olusers[i]) {olusers.splice(i,1);}
  }
 // alert(olusers);
  refreshuser();
}

function showalluser(content)
{
  var users=content.split('|');
  olusers=users;
 // alert(olusers.length);
  olusers[olusers.length-1]="all";
 // alert(olusers);
  refreshuser();
  

}
function login()
{
  username=prompt("please input your name");
  $("myname").innerHTML="My name is "+username;
  $("titlename").innerHTML="WebSocket "+username+"‘s chat room";
  var msg='{"type":"login","clientname":"'+username+'","touser": "server","content":""}\n';
  //alert(msg);
   try{ socket.send(msg);  } catch(ex){ log(ex); }
}
function sendmsg()
{
  var obj = document.getElementById("senduser");
  var index = obj.selectedIndex; // 选中索引
  var touser = obj.options[index].text; // 选中文本
  var txt,msginput;
  txt = $("msg");
  msginput = txt.value;
  if(!msginput){ alert("Message can not be empty"); return; }
  log("sent: "+msginput);
  txt.value="";
  txt.focus();
 
 // var touser=slt.selectedIndex.text;
  var msg='{"type":"msg","clientname":"'+username+'","touser":"'+touser+'","content":"'+msginput+'"}\n';
   try{ socket.send(msg); } catch(ex){ log(ex); }

}
function send(){
  var txt,msg;
  txt = $("msg");
  msg = txt.value;
  if(!msg){ alert("Message can not be empty"); return; }
  txt.value="";
  txt.focus();
  try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
}
function quit(){
  log("Goodbye!");
   var msg='{"type":"logout","clientname":"'+username+'","touser":"server","content":""}\n';
   try{ socket.send(msg);} catch(ex){ log(ex); }
  deluser(username);
  socket.close();
  socket=null;
}

// Utilities
function $(id){ return document.getElementById(id); }
function log(msg){ $("log").innerHTML+="<br>"+msg; }
function onkey(event){ if(event.keyCode==13){ sendmsg(); } }
</script>

</head>
<body onload="init()">
 <h3>WebSocket v2.00</h3>
 <div id="myname"></div>
 <div id="log"></div>
 <input id="msg" type="textbox" onkeypress="onkey(event)"/>
 <button onclick="sendmsg()">Send</button>
 <button onclick="quit()">Quit</button>
 <div>Commands: hello, hi, name, age, date, time, thanks, bye</div>
 <div id="onlineuser"></div>
 <div>
   message send to &nbsp;
   <select id="senduser">
   
  </select>
</div>
</body>
</html>
